<template>
  <view class="u-p-t-20 u-p-b-20 u-p-l-40 u-p-r-40">
    <view class="header flex-between u-flex">
      <view class="u-font-32 font-b color-000">{{ id ?  '更新' : '发布'}}日记</view>
      <view class="u-text-center pub-btn font-b u-font-28" @click="release">发布</view>
    </view>
    <view class="u-m-t-26">
      <u-input v-model="form.diaryDesc" :clearable="false" :maxlength="9999"
               :trim="false"
               type="textarea" :border="true" :auto-height="true" />
    </view>
    <!-- 文本输入框区域结束 -->
    <view class="fabuInput u-m-t-20">
      <input type="text" v-model="form.diaryType" placeholder="添加话题(可省略)" :disabled="readonly" />
    </view>
    <view class="u-flex flex-between u-p-t-20 u-p-b-20" v-if="id">
      <view class="color-000 u-font-28">同时发布到社区中</view>
      <u-switch v-model="form.showFlag" :active-value="1" :inactive-value="0"></u-switch>
    </view>
    <!-- 上传区域开始 -->
    <u-upload ref="upload" @on-success="uploadSuccess" :custom-btn="true" max-count="3"
              :file-list="fileList"
              :size-type="['compressed']"
              :show-progress="false"
              @on-progress="uploadProgress"
              :action="action" :header="header">
      <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
        <img src="https://app.zbzedu.com/static/WaChat/icon/forum/addImg.png" />
        <text>上传图片</text>
      </view>
    </u-upload>
  </view>
</template>

<script>
  import {request} from "../../util/api";
  import { BASE_URL } from "../../util/api";
  import {TOAST} from "../../util/util";
import {getCurrentFullPath} from "../../util/util";
  export default {
    onLoad(option) {
      if (option.diaryType) {
        this.form.diaryType = option.diaryType
        this.readonly = true
      }
    },

    data() {
      return {
        form: {
          fileList: [],
          showFlag: 1
        },
        action: BASE_URL + '/common/upload',
        fileList: [],
        readonly: false
      }
    },

    computed: {
      header() {
        let info = uni.getStorageSync(process.env.NODE_ENV + 'zbz_user')
        let token = info && info.token
        return {
          'Authorization': `${token}`
        }
      }
    },

    methods: {
		// 转发功能
		onShareAppMessage(res) {
		  return {
		    path: getCurrentFullPath()
		  }
		},
      release() {
        if (!this.form.diaryDesc) {
          TOAST('请输入内容！')
          return
        }
        this.getFileList()
        request({
          url: '/system/CompassDiary',
          method: 'post',
          data: this.form
        }).then(res => {
        	let pages = getCurrentPages();
          let prevPage = pages[pages.length - 2];
          try {
            prevPage.$vm.getlist()
          } catch (e) {

          }
          uni.showModal({
            title: '提示',
            content: '发布成功',
            showCancel: false,
            success: function (res) {
              uni.navigateBack()
            }
          })
        })
      },

      getFileList() {
        let files = this.$refs.upload.lists
        const fileList = files.filter(item => {
          return {fileUrl: item.response.url}
        })
        this.form.fileList = fileList.map(item => {
          return {fileUrl: item.response.url}
        })
      },

      uploadSuccess(res) {
        uni.hideToast()
        if (res.code != 200) {
          uni.showModal({
            title: '提示',
            content: res.msg,
            showCancel: false
          })
          this.$refs.upload.clear()
          return
        }
        TOAST('上传成功！')
      },

      uploadProgress() {
        uni.showToast({
          title: '图片上传中',
          icon: 'loading'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .pub-btn {
    width: 148rpx;
    height: 62rpx;
    line-height: 62rpx;
    border-radius: 8rpx;
    background-color: rgba(42, 108, 172, 100);
    color: #fff;
  }
  // 输入框样式
  .fabuInput {
    input {
      width: 400rpx;
      border: 1rpx solid #CCCCCC;
      font-size: 28rpx;
      height: 60rpx;
      padding: 0 20rpx;
      border-radius: 30rpx;
    }
  }

  .slot-btn {
    width: 162rpx;
    height: 162rpx;
    display: flex;
    margin-top: 20rpx;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgb(244, 245, 246);
    border-radius: 10rpx;

    image {
      width: 48rpx;
      height: 48rpx;
    }

    text {
      font-size: 24rpx;
      margin-top: 10rpx;
      color: #7f7f7f;
    }
  }

  .slot-btn__hover {
    background-color: rgb(235, 236, 238);
  }
</style>
